<template>
  <div class="m-4">
    <div class="text-lg font-black text-slate-600 dark:text-slate-400">请先登录</div>
    <div class="text-xs opacity-50">登录后仍可<b>匿名</b>发表留言或回复信息</div>
    <el-form class="my-4">
      <el-form-item>
        <el-input placeholder="姓名 / 工牌号" v-model="username"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="密码 (同TREX)" v-model="password"></el-input>
      </el-form-item>
    </el-form>
    <div class="flex justify-end">
      <el-button type="primary" link @click="handleBack()">返回</el-button>
      <el-button type="primary" @click="handleLogin()">登录</el-button>
    </div>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { ref } from 'vue'
import useUserStore from '@/stores/user.js'
import { ElNotification } from 'element-plus'
const router = useRouter()
const userStore = useUserStore()

const username = ref('')
const password = ref('')

const handleLogin = () => {
  // router.back()
  userStore.login({ username: username.value, password: password.value }).then((res) => {
    switch (res.status) {
      case 1:
        ElNotification({
          title: '已登录',
          message: '',
          type: 'success'
        })
        router.back()
        break
      case -1:
        ElNotification({
          title: '密码错误',
          message: '',
          type: 'warning'
        })
        break
      case -2:
        ElNotification({
          title: '用户名或工牌号错误',
          message: '',
          type: 'warning'
        })
        break
      default:
        ElNotification({
          title: '未知错误',
          message: '',
          type: 'error'
        })
    }
  })
}

const handleBack = () => {
  router.back()
}
</script>
